// index.js
// 获取应用实例
const app = getApp()
let xTop = 0;
Page({
  data: {
    navHeight: '',
    menuButtonInfo: {},
    searchMarginTop: 0, // 搜索框上边距
    searchWidth: 0, // 搜索框宽度
    searchHeight: 0, // 搜索框高度
    listItems: [
      "今天发现一件有意思的事情1，你猜..",
      "今天发现一件有意思的事情2，你猜..",
      "今天发现一件有意思的事情3，你猜..",
      "今天发现一件有意思的事情4，你猜.."
    ],
    listIndex: 0, // 显示第几个列表
    tabIndex: 0, // 首页选项卡
    fixedTabs: false, // 是否固定 选项卡
    // 工种
    types: [
      [
        { "id": 1, 'name': '整件车工' },
        { "id": 2, 'name': '流水车工' },
        { "id": 3, 'name': '针织车工' },
        { "id": 4, 'name': '裤子车工' },
        { "id": 5, 'name': '学徒车工' },
        { "id": 6, 'name': '双面车工' },
        { "id": 7, 'name': '自由组车工' },
        { "id": 8, 'name': '跑胆布' }
      ],
      [
        { "id": 1, 'name': '裁剪主刀' },
        { "id": 2, 'name': '裁剪副刀' },
        { "id": 3, 'name': '电剪' },
        { "id": 4, 'name': '后道主管' },
        { "id": 5, 'name': '包装' },
        { "id": 6, 'name': '大烫' },
        { "id": 7, 'name': '小烫' },
        { "id": 8, 'name': '质检' }
      ],
      [
        { "id": 1, 'name': '流水组长' },
        { "id": 2, 'name': '整件组长' },
        { "id": 3, 'name': '车间管理' },
        { "id": 4, 'name': '生产厂长' },
        { "id": 5, 'name': '样衣工' },
        { "id": 6, 'name': '锁眼钉扣' },
        { "id": 7, 'name': '裘皮师傅' }
      ],
    ],
    typeCurrent:0,
  },
  onLoad: function () {
    setInterval(() => {
      this.data.listIndex += 1
      if (this.data.listIndex >= this.data.listItems.length) {
        this.data.listIndex = 0
      }
      this.setData({
        listIndex: this.data.listIndex
      })
    }, 2000)
    this.setData({
      menuButtonInfo: wx.getMenuButtonBoundingClientRect()
    })
    console.log(this.data.menuButtonInfo)
    const { top, width, height, right } = this.data.menuButtonInfo
    wx.getSystemInfo({
      success: (res) => {
        console.log(res)
        const { statusBarHeight, screenWidth } = res
        const margin = top - statusBarHeight
        this.setData({
          navHeight: (height + statusBarHeight + (margin * 2)),
          searchMarginTop: statusBarHeight + margin, // 状态栏 + 胶囊按钮边距
          searchHeight: height,  // 与胶囊按钮同高
          searchWidth: right - width, // 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度
          screenWidth: screenWidth
        })
      },
    })
  },
  onPageScroll(e) {
    //创建节点选择器
    let query = wx.createSelectorQuery();
    //选择id
    let that = this;
    query.select('.tabs').boundingClientRect(function (rect) {
      console.log(e.scrollTop)
      console.log(rect)
      const top = rect.top
      if (top > 0 && e.scrollTop > top && !that.data.fixedTabs) { // 页面上卷高度 大于页面固定按钮位置
        that.setData({
          fixedTabs: true, // 显示指定区域
          fixedTop: top, // 固定时候距离顶部距离
        })
        console.log("固定:" + top)
        wx.setNavigationBarColor({
          backgroundColor: '#ffffff',
          frontColor: '#000000',
        })

      } else if (e.scrollTop < that.data.fixedTop && that.data.fixedTabs) {
        that.setData({
          fixedTabs: false,  // 隐藏指定区域
          fixedTop: 0,
        })
        console.log("取消固定:" + that.data.fixedTop)
        wx.setNavigationBarColor({
          backgroundColor: '#000000',
          frontColor: '#ffffff',
        })

      }
    }).exec();
  },
  // 切换tab
  clickTab(e) {
    const index = e.target.dataset.index
    console.log(index)
    this.setData({ tabIndex: index })
  },
  // 分类切换
  typeChange(e){
    this.setData({typeCurrent:e.detail.current})
  }
})
